<script>
export default {
  name: "CTab",
  props: {
    index: {
      type: [String, Number],
      required: true
    },
    label: {
      type: String
    }
  },
  computed: {
    active () {
      return this.index === this.$parent.activeKey
    },
    tabClass () {
      return ["content-tab-link", this.active ? "active" : ""]
    }
  },
  methods: {
    handleClick () {
      this.$parent.handleTabClick(this.index)
    }
  },
  render (h) {
    return h(
      "li",
      {
        class: this.tabClass,
        on: {
          click: this.handleClick
        }
      },
      this.$slots.default
    )
  }
}
</script>